<template>
  <div class="catalogView">
    <!-- 头部 -->
    <header class="header">
      <div class="left" @click="$router.back()"></div>
      <div class="title">目录</div>
    </header>
    <!-- 头部 -->

    <!-- 书籍信息 -->
    <div class="mains line" v-if="catalog">
      <!-- 封面 -->
      <div class="img">
        <img :src="catalog.book.coverImage" alt="" />
      </div>
      <!-- 文本 -->
      <div class="text">
        <div class="title">{{ catalog.book.title }}</div>
        <div class="author">{{ catalog.book.author }}</div>
        <div class="length">共{{ catalog.catalog.length }}章</div>
      </div>
    </div>
    <!-- 书籍信息 -->

    <!-- 目录 -->
    <div class="catalog" v-if="catalog">
      <div
        :class="['item', 'line']"
        v-for="vl in catalogList"
        :key="vl.uuid"
        @click="reader(vl.uuid)"
      >
        {{ vl.title }}
        <div class="lock iconfont icon-mima" v-show="vl.needPay"></div>
      </div>
    </div>
    <!-- 目录 -->

    <div class="loadingBox" v-if="!catalog">
      <van-loading text-color="#fff" color="#ffffff" size="24px" vertical>
        加载中...
      </van-loading>
    </div>
  </div>
</template>

<script>
import { getCatalogData } from "../api/details";
export default {
  data() {
    return {
      bookId: null, // 书籍id
      catalog: null, // 书籍目录和信息
      catalogList: null, // 书籍目录
    };
  },
  methods: {
    // 获取书籍目录
    getCatalogDataFun() {
      getCatalogData({ source_uuid: this.bookId }).then((data) => {
        this.catalog = data.data;

        this.catalogList = data.data.catalog.filter(
          (vl) => !vl.needPay && "needPay" in vl
        );

        let isVip = this.userInfo.isVip;

        if (isVip) {
          this.catalogList.forEach((vl) => {
            vl.needPay = false;
          });
        } else {
          this.catalogList.forEach((vl, i) => {
            let isPay = this.userInfo.Purchased[this.bookId].some((item) => {
              return item == vl.uuid;
            });
            if (i > 4 && isPay == false) {
              vl.needPay = true;
            }
          });
        }

        console.log("目录列表==>", this.catalogList);
      });
    },
    // 阅读
    reader(contentId) {
      this.$router.push({
        path: "/content",
        query: {
          bookId: this.bookId,
          contentId,
        },
      });
    },
    // 获取用户数据
    getUserDataFun() {
      let userId = localStorage.getItem("userId");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"))[userId];
    },
  },
  created() {
    this.bookId = this.$route.query.id;
    this.getUserDataFun();
    this.getCatalogDataFun();
  },
};
</script>

<style lang="scss" scoped>
.catalogView {
  position: relative;
  min-height: 100%;

  .line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    transform: scaleY(0.5);
  }

  > header.header {
    height: 50px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;

    > .left {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 15px;
      margin: auto;
      transform: rotate(180deg);
      background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
        no-repeat;
      background-size: contain;
      width: 12px;
      height: 20px;
    }

    > .title {
      color: #333;
      font-weight: bold;
      line-height: 50px;
      font-size: 18px;
    }
  }

  > .mains {
    display: flex;
    padding: 20px;
    position: relative;

    > .img {
      width: 60px;
      height: 80px;
      margin-right: 12px;

      > img {
        width: 100%;
      }
    }

    > .text {
      flex: 1;

      > .title {
        font-size: 15px;
        line-height: 23px;
        font-weight: bold;
      }

      > .author {
        font-size: 12px;
        line-height: 25px;
        color: #999;
      }

      > .length {
        margin-top: 16px;
        font-size: 12px;
        line-height: 12px;
        color: #999;
      }
    }
  }

  > .catalog {
    padding: 0 20px;
    > .item {
      position: relative;
      padding: 18px 0;
      padding-right: 18px;
      font-size: 14px;

      > .lock {
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
}

.loadingBox {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #ccc;
  padding: 20px;
  border-radius: 4px;
  transform: translateX(-50%) translateY(-50%);
}
</style>